<template>
    <div class="listcont">
        <div class="name">消费项目Top3</div>
        <el-table :data="useList" size="mini" style="width:98%;margin: 0 auto;"
                  :header-cell-style="{background:'#f7f7f7',color:'#fff','text-align':'center',height: '20px',fontSize:'14px'}"
                  :row-style="{height: '26px'}">
            <el-table-column prop="brand" label="排名" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.brand" style="width: 27px;margin-top: 10px;margin-left: 11px;">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
            <el-table-column prop="modelNum" label="模型定义数" align="center"></el-table-column>
            <el-table-column prop="taskNum" label="运行任务数" align="center"></el-table-column>
            <el-table-column prop="countCost" label="累计产生费用" align="center">
                <template slot-scope="scope">
                    ￥{{ scope.row.countCost }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
  import IMGTOP1 from './image/TOP1.svg'
  import IMGTOP2 from './image/TOP2.svg'
  import IMGTOP3 from './image/TOP3.svg'
  export default {
    data () {
      return {
        useList: [
          {
            brand: IMGTOP1,
            name: '某某项目',
            modelNum: '3',
            taskNum: '230',
            countCost: '0'
          },
          {
            brand: IMGTOP2,
            name: '某某项目',
            modelNum: '3',
            taskNum: '230',
            countCost: '0'
          },
          {
            brand: IMGTOP3,
            name: '某某项目',
            modelNum: '3',
            taskNum: '230',
            countCost: '0'
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
